<template>
  <content-page>
    <div class="page-header-wrapper-grid-content-main">
      <a-card :bordered="false">
        <div class="account-center-avatarHolder">
          <div class="avatar">
            <img src="http://up.enterdesk.com/edpic/21/37/63/213763efc6b6e6cc5bdf651663faaa37.jpg">
          </div>
          <div class="username">极科研发.椎疯少年</div>
          <div class="bio">精益求精，极致研发</div>
        </div>
        <div class="account-center-detail">
          <p>
            <i class="title"></i>全栈工程师
          </p>
          <p>
            <i class="group"></i>专注于web软件开发
          </p>
          <p>
            <i class="address"></i>
            <span>四川.成都</span>
          </p>
          <p>
            <i class="address"></i>
            <span>979501437@qq.com</span>
          </p>
        </div>
        <a-divider/>
        <div class="account-center-tags">
          <div class="tagsTitle">标签</div>
          <div>
            <template v-for="(tag) in tags">
              <a-tag :key="tag">{{ tag }}</a-tag>
            </template>
          </div>
        </div>
      </a-card>
    </div>
  </content-page>
</template>
<script>

export default {
  data () {
    return {
      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川']
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
  .page-header-wrapper-grid-content-main {
    width: 400px;
    height: 100%;
    min-height: 100%;
    transition: 0.3s;
    margin: 0 30%;
    .account-center-avatarHolder {
      text-align: center;
        margin-bottom: 24px;
        & > .avatar {
          margin: 0 auto;
          width: 104px;
          height: 104px;
          margin-bottom: 20px;
          border-radius: 50%;
          overflow: hidden;
          img {
            height: 100%;
            width: 100%;
          }
        }
       .username {
          color: rgba(0, 0, 0, 0.85);
          font-size: 20px;
          line-height: 28px;
          font-weight: 500;
          margin-bottom: 4px;
        }
    }
    .account-center-detail {
      p {
        margin-bottom: 8px;
        padding-left: 26px;
        position: relative;
      }

      i {
        position: absolute;
        height: 14px;
        width: 14px;
        left: 0;
        top: 4px;
        background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
      }

      .title {
        background-position: 0 0;
      }
      .group {
        background-position: 0 -22px;
      }
      .address {
        background-position: 0 -44px;
      }
    }

    .account-center-tags {
      .ant-tag {
        margin-bottom: 8px;
      }
    }

    .tagsTitle {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
  }
</style>
